<template>
  <div class="echarts">
    <div id="container"></div>
  </div>
</template>
 
<script setup lang="ts">
import * as echarts from 'echarts'
import { ref,watch, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

import jian from '../../assets/images/HomeView/jian.png'
import feng from '../../assets/images/HomeView/feng.png'
import ping from '../../assets/images/HomeView/ping.png'
import gu from '../../assets/images/HomeView/gu.png'
import shengu from '../../assets/images/HomeView/shengu.png'
var _jian = 'image://'+jian
var _feng = 'image://'+feng
var _ping = 'image://'+ping
var _gu = 'image://'+gu
var _shengu = 'image://'+shengu


watch(() => store.state.devicesQuantityCategory, () => {
  updateChart()
})

const goback = () => {
  window.history.back()
}
var myChart
const updateChart = () => {
  var option
  var pieData = [{ value: store.state.devicesQuantityCategory.spireQuantity, name: '尖', icon: _jian,iconWidth: 90*window.innerWidth/1920,iconHeight: 30*window.innerWidth/1920,textStyle:{color:"#35F0FC"},itemStyle:{color:"#35F0FC"}  },
      { value: store.state.devicesQuantityCategory.peakQuantity, name: '峰' , icon: _feng,iconWidth: 30*window.innerWidth/1920,iconHeight: 30*window.innerWidth/1920,textStyle:{color:"#1DF7BA"},itemStyle:{color:"#1DF7BA"}},
      { value: store.state.devicesQuantityCategory.flatQuantity, name: '平', icon: _ping,iconWidth: 30*window.innerWidth/1920,iconHeight: 30*window.innerWidth/1920,textStyle:{color:"#0AA7FE"},itemStyle:{color:"#0AA7FE"}},
      { value: store.state.devicesQuantityCategory.valleyQuantity, name: '谷', icon: _gu,iconWidth: 30*window.innerWidth/1920,iconHeight: 30*window.innerWidth/1920,textStyle:{color:"#FEDC22"},itemStyle:{color:"#FEDC22"}},
      { value: store.state.devicesQuantityCategory.deepValleyQuantity, name: '深谷', icon: _shengu,iconWidth: 30*window.innerWidth/1920,iconHeight: 30*window.innerWidth/1920,textStyle:{color:"#aaa"},itemStyle:{color:"#aaa"}}];
  let totalValueCount = 0
  for (let i in pieData) {
    totalValueCount = totalValueCount+ pieData[i].value
  }
  myChart.setOption((option = makeOption()))
  function makeOption() {
    return {
      textStyle: {
        fontSize: 16*window.innerWidth/1920,
        color: '#fff'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: "vertical",
        top: 70*window.innerWidth/1920,
        left: 287*window.innerWidth/1920,//距离左侧287像素
        align: "left",
        padding: [0, 0, 0, 0],
        itemGap: 15*window.innerWidth/1920,//示例组件间距
        itemWidth: 30*window.innerWidth/1920,//示例组件图标大小
        itemHeight: 30*window.innerWidth/1920,//示例组件图标大小
        formatter: function (name) {//设置图例格式
          // 根据name获取对应的value
          for (let i in pieData) {
            if (pieData[i].name == name) {
              return '　{name|' + pieData[i].name + '}　{value|' + pieData[i].value + 'kWh}';
            }
          }
          // 返回自定义的文本内容，包括name和value的组合
          return name;
        },
        textStyle: {
          rich: {//设置图例格式 - 的样式
            name: {
              color: function (params) {
                return params.color;
              },
              fontFamily: '黑体',
              fontSize: 18*window.innerWidth/1920,
            },
            value: {
              color: function (params) {
                return params.color;
              },
              fontFamily: '黑体',
              fontSize: 15*window.innerWidth/1920,
            }
          },
          icon: {
            width: 30*window.innerWidth/1920,
            height: 30*window.innerWidth/1920
          }

        },
        data: pieData
      },

      series: [
        {
          name: '电量结构',
          type: 'pie',
          radius: ['50%', '100%'],
          left: 52*window.innerWidth/1920,
          top: 100*window.innerWidth/1920,
          width: 210*window.innerWidth/1920,
          height: 210*window.innerWidth/1920,
          avoidLabelOverlap: false,
          legendHoverLink: true,//是否启动联动高亮
          label: {
            show: true,
            position: 'inside',
            fontSize: 12*window.innerWidth/1920,
            color: '#fff',
            formatter: function (params) {//设置图例格式
              if (params.data.value == 0) {
                return 0 + "%";
              }
              return (params.data.value * 100 / totalValueCount).toFixed(1) + "%";
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20*window.innerWidth/1920,
              color: '#fff',
              fontWeight: 'bold'
            }
          },
          data: pieData
        }
      ],
      graphic: [
        {
          type: 'text',
          left: 108*window.innerWidth/1920,
          right: 290*window.innerWidth/1920,
          top: 195*window.innerWidth/1920,
          zlevel: 10,
          style: {
            text: totalValueCount,
            width: 100*window.innerWidth/1920,
            overflow: 'break',
            fill: '#fff',
            textAlign: "center",
            fontSize: 20*window.innerWidth/1920
          }
        },
        {
          type: 'text',
          left: 108*window.innerWidth/1920,
          right: 290*window.innerWidth/1920,
          top: 215*window.innerWidth/1920,
          zlevel: 10,
          style: {
            text: 'kWh',
            width: 100*window.innerWidth/1920,
            overflow: 'break',
            fill: '#fff',
            textAlign: "center",
            fontSize: 10*window.innerWidth/1920
          }
        }
      ]

    }
  }
}
const dotChart = () => {
  myChart = echarts.init(document.getElementById('container'))
  updateChart()
}




onMounted(() => {
  dotChart()
})
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.echarts {
  height: 100%;
  padding: 0 5px;

  &>div {
    height: 100%;
    width: 100%;

    :deep(canvas) {
      height: 100% !important;
      width: 100% !important;
    }
  }
}
</style>